/**
 * 全屏
 */
import { useState, useEffect } from 'react';
import { message } from 'antd';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
import screenfull, { Screenfull } from 'screenfull';

const ScreenFull = () => {
  const [state, setState] = useState<any>(false);
  const handlerScreenFull = () => {
    if (!screenfull.isEnabled) {
      message.warning({
        content: 'you browser can not work'
      })
      return false;
    }
    screenfull.toggle();
  };
  useEffect(()=>{
    if(screenfull.isEnabled) {
      screenfull.on('change', ()=> {
        setState({
          state: (screenfull as Screenfull).isFullscreen
        })
      })
    }
  }, [state]);

  return (
    <>
      {
        state ? <FullscreenExitOutlined onClick={handlerScreenFull} style={{ fontSize: '20px'}} /> : <FullscreenOutlined onClick={handlerScreenFull} style={{ fontSize: '20px'}} />
      }
    </>
  )
}

export default ScreenFull;
